// pages/canvas/canvas.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        context: null,
        height:null,
        width:null,
        dpr:null,
        canvas:null,
        lineWidth :5,
        color:'#000',
        class:'',
        show:false, 
         actions: [
            {
              name: '保存当前涂鸦到本地',
              id:1
            },
            {
              name: '清空画板',
              id:2
            },
            {
              name: '回到首页',
              id:3
            },
          ],
    },
    // 事件处理函数
    setWidth(e){
        if(this.data.color==='#fff'){
            // 从橡皮过来
            this.setData({
                color:'#000',
            })
        }
        const width = e.currentTarget.dataset.width
        this.setData({
            lineWidth:width
        });
        const index = e.currentTarget.dataset.index
        // console.log(index)
        this.setData({
            class:index
        })
    },
    setcolor(e){
        
        const index = e.currentTarget.dataset.index
        console.log(index)
        this.setData({
            class:index
        })
        const color = e.currentTarget.dataset.color
        this.setData({
            color:color
        });
        // 如果点击了橡皮擦就重新设置笔尖粗细
       

    },
    end(){
        console.log('end')
    },
    handleLongtap(){
        // 长按画布的处理保存图片或者清空画布
        console.log("长按了")
        this.setData({
            show:true
        })
    },
    onClose(){
        this.setData({
            show:false
        })
    },
    onSelect(e){
        console.log(e)
        const targetIndex = e.detail.id;

        if(targetIndex === 1){
            console.log('ccc')
            // 保存当前涂鸦到本地
            wx.canvasToTempFilePath({
                canvas:this.data.canvas,
                success:(res)=>{
                    console.log(res)
                    const file = res.tempFilePath;
                    // 询问用户访问本地相册
                    wx.authorize({
                        scope:'scope.writePhotosAlbum',
                        success(){
                            wx.saveImageToPhotosAlbum({
                                filePath:file,
                                success:()=>{
                                    console.log('保存成功')
                                }
                            })
                        }
                    })
                },
                complete:(res)=>{
                    console.log(res)

                }
            })
        }
        if(targetIndex === 2){
            console.log('清空画布');
            // console.log(this.data.canvas.width,this.data.height)
            // this.data.canvas.height = this.data.height;
            // this.data.canvas.width = this.data.width;
            this.data.context.clearRect( 0, 0, this.data.canvas.width, this.data.height);
            this.initBoard()
        }
        if(targetIndex === 3){
            // 回到首页
            wx.navigateBack()
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
            .fields({
                node: true,
                size: true
            })
            .exec((res) => {
                const canvas = res[0].node;
                this.setData({
                    canvas:canvas
                })
                const renderWidth = res[0].width
                const renderHeight = res[0].height
               
                const dpr = wx.getSystemInfoSync().pixelRatio;
                canvas.width = renderWidth * dpr
                canvas.height = renderHeight * dpr

                this.setData({
                    width:parseInt(renderWidth * dpr),
                    height:parseInt(renderHeight * dpr),
                    dpr
                })
                console.log(canvas.width,canvas.height,this.data.width,this.data.height)
                const ctx = canvas.getContext('2d');
                ctx.scale(dpr, dpr);

                
                this.setData({
                    context: ctx
                })
                this.initBoard()
            })
    },
    initBoard(){
        // 想把画板变成一个底色为白色的画板
        this.data.context.lineWidth = 5;
        this.data.context.strokeStyle= '#fff'
        this.data.context.moveTo(0,0)
        this.data.context.lineTo(this.data.width,0)
        this.data.context.lineTo(this.data.width,this.data.height)
        this.data.context.lineTo(0,this.data.height)
        this.data.context.lineTo(0,0)
        this.data.context.fillStyle = 'rgb(255, 255, 255)';
        this.data.context.fill()
        this.data.context.stroke()
    },
    start(e){
        console.log("开始触摸");
        // this.data.context.lineWidth=5
        // this.data.context.lineCap ='round'
        this.init()

        this.data.context.beginPath()
        console.log(e)
        const startX = e.changedTouches[0].x;
        const startY = e.changedTouches[0].y;
        this.data.context.moveTo(startX, startY);

        // this.data.context.lineTo(startX, startY);
        // this.data.context.stroke();

    },
    init(){
        // 初始化笔尖参数
        this.data.context.lineWidth = this.data.lineWidth;
        this.data.context.lineCap = 'round';
        this.data.context.strokeStyle = this.data.color;

    },
    move(e){
        // console.log(e)
        const movedX = e.changedTouches[0].x;
        const movedY = e.changedTouches[0].y;
        this.data.context.lineTo(movedX,movedY);
        this.data.context.stroke();
        this.data.context.moveTo(movedX, movedY);


    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        wx.stopPullDownRefresh()
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        // console.log('oxox')
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})